Main/CS349W Project3/InteractiveCommenting
Overview Evolution of Web 2.0 has shown how powerful information can be obtained from the website surfers (users) in the form of comments, feedback, rating and additional contents. Our application provides an hassle free interface for website developers to get feedback and comments (currently in the form of text) from their users. Our commenting application takes care of all the sub-tasks involved. It provides a clean interface for the user to write comments, storing the comments and displaying the comments. The interface is non-intrusive which preserves the original website design. It also doesn't interfere with user's browsing experience with unwanted pop-ups. Only if the users wishes to see comments and share his thought or comment on certain item on the web-page, he can do so by some quick intuitive actions. Each word in a DOM element can be specifically commented, which allows the comments to very targeted and precise. As mentioned the aim of this project was make this interaction as non-intrusive as possible to ensure improved level of browsing experience. Also, project was kept as modular and portable as possible to make it easy to use for the developers, regardless of their website structure, by including the script and calling a function. Implementation is partly browser-side and server-side. Server was required to store and retrieve user comments and browser handles the interaction with the user and communicates with server to fetch and send comments How To Use (Developer) Developers can use this commenting interface by simply embedding a javascript (comment.js) and stylesheet (comment.css). Also, as this application involves communication with our server for fetching and storing comments, which modifies the DOM structure of the web-page. This cross-domain communication is handled using PHP servlet, so the website need to hosted in a servlet enabled server. Further discussion in Stumbling point. How To Use (User) User has the option of enabling and disabling the commenting interface all the while he is browsing the website. Whenever user hovers mouse on the top right corner, a drop down box is presented to the user, using which user can choose to enable the mode to write and view comment by the following ways: Write a Comment Once the commenting mode is enabled by the user, user can write comments by double clicking on any word in a DOM element. Another text box is presented to the user to write and post the comment. This comment is stored in our server. View Comments Similarly, once the commenting mode is enabled by the user all the DOM element that have been already commented are highlighted (style defined in comment.css). User can double click on any of the highlighted items and a pop-up box with comments for the item is presented (currently we are only showing the latest comment). Implementation Tokenization Server Communication Item Key Comment Storage Text Highlighting Pop ups Stumbling point * Cross-domain communication: BIG * Identifying DOM element selected by user: Ryan Future Work All the following are can be easily implemented as an extension to our current running version. * User Authentication: Currently, we allow anyone to view and post comment on the website, this can be restricted by an authentication process for the user, hence allowing website developer to control on who can post comments. * Moderation/Authorization: Currently, we do not support deletion or any sort approval from the website developer for the comments. This can potentially lead to spam and unwanted comments. To avoid this we can request approval from the website developer before publishing the user comment. Also, we can provide website developer and comment author the option of deleting comments. * Multimedia Support: Currently, we are only supporting text comments. But this can be extended to accept multimedia comments from the user in the form of images, audio and videos uploads. * More Styling Options: Currently, when the user wishes to see the commented items, commented text is highlighted (style defined in comment.css) by red color and bold styling. We can provide with more styles to blend better with the web-page. Strengths From the perspective of the user, our commenting interface provides a rich way for the user to share his thoughts, comments and feedback about the website with the developer and other users. This interaction is non intrusive, with the user always having the option to disable the commenting mode. Double click action is very intuitive. We have tried to minimize the interference of the pop up boxes in the website browsing experience. Also, we allow comments for any DOM element, this granularity to single word is not provided by any conventional commenting methods (which are limited to web-pages, blog entries, news-article, videos, images, etc). This allows a way to write very specific and precise comment and feedback which can be helpful to both developer and other users. From the perspective of the developer, this is very easy to use, all he has to do is to embed the comment.js and comment.css and all the rest is taken care including storing and fetching of comments for each of the specific DOM element on the website. Weaknesses * The tokenization process, which was incorporated to identify the selections made by the user sometimes changes the websites slightly what kind of formatting in specific?. This is one of the undesirable outcome, as site developers and users might not like the changes. * The necessity of servlet enable server for hosting the website can be a bottleneck in the usage of this commenting interface. * Also, the features mentioned in future work which are currently not present in our running demo and, so, are weaknesses which can be overcome by extending the scripts to support the above mentioned options. Examples * Demo Webpage: http://128.12.142.225/349/test.htm * Javascript: http://128.12.142.225/349/comment_script/comment.js * CSS: http://128.12.142.225/349/comment_script/comment.css